﻿/* Basic stuff */
*                           { margin: 0; padding: 0; }
body                        { font: 12px "Lucida Grande", Sans-Serif; background: url(images/bg.png); }
#page-wrap                  { width: 500px; margin: 30px auto; position: relative; }

/* title area */
#title-wrap                 { height: 63px; }
#title-area                 { float: left; vertical-align:middle; color: #FFF; font: 50px "Impact", Serif; }

#name-area                  { position: absolute;  top: 20px; right: 0;
                              background: rgba(0, 0, 0, 0.3); cursor: pointer; padding: 10px;
                              color: white; font: bold 12px "Lucida Grande", Sans-Serif; text-align: right; }   
#name-area span             { color: #fa9f00;}

/* chat-menu-area */
#chat-room-menu             { overflow: auto; background: rgba(0, 0, 0, 0.3); padding: 20px }
#chat-room-menu-title       { color: #FFF; font-size: 30px; margin-bottom: 20px}

div.chat-room               { background: rgba(0, 0, 0, 0.3); padding: 10px; position: relative;
                              color: #08b71b; font-size: 15px}
div.chat-room-num-users     { position: absolute; right: 10px; top: 7px; }
div.chat-room-num-users strong   { color: white; font-size: 18px; }

/* error msgs from server */
#server-msg                 { margin: 5px 0 5px 0; padding: 5px 0 5px 0; -moz-border-radius: 5px; -webkit-border-radius: 8px; text-align: center}
div.hide-msg                { display: none }
div.error-msg               { display: block; background-color: #f9c6c6; color: #f00; border: 1px solid #f00;  }

/* chat area */
#chat-wrap                  { border: 3px solid #999; margin: 0 0 15px 0; }
#chat-area                  { height: 300px; overflow: auto; border: 1px solid #666; padding: 20px; background: white; }
#chat-area span             { color: white; background: #333; padding: 4px 8px; -moz-border-radius: 5px; -webkit-border-radius: 8px; margin: 0 5px 0 0; }
#chat-area p                { padding: 8px 0; border-bottom: 1px solid #ccc; }

/* messages */
div.message-wrap            { margin-bottom: 7px; padding-bottom:7px; border-bottom: 1px solid #ccc; }
div.message                 { display:table;}
div.name-wrap			    { display:table-cell; vertical-align:middle}
div.name-wrap span          { color: white; background: #333; padding: 4px 8px; -moz-border-radius: 5px; -webkit-border-radius: 8px; margin: 0 5px 0 0;}
div.message-body            { display:table-cell; word-wrap:break-word }

/* sendie */
div.send-inst               { display: table-cell; color: white; font-size: 14px; vertical-align: middle; padding-right: 19px}
#sendie                     { border: 3px solid #999; width: 360px; padding: 10px; font: 12px "Lucida Grande", Sans-Serif; float: right;  resize: none;}
